<template>
  <view class="container" style="padding-bottom: 100px" v-if="isLoaded">
    <!-- 表单 -->
    <view class="content" style="padding: 20rpx 40rpx 180rpx; background-color: #fff">
      <li-form>
        <li-form-item label="员工姓名" required>
          <li-input v-model="form.name" rule="trim" prop="name" @blur="onBlurEvent($event)" />
        </li-form-item>
        <li-form-item label="所属部门">
          <li-picker :range-list="DepartmentList" v-model="form.departmentId" :range-key="'name'" />
        </li-form-item>
        <li-form-item label="手机号码">
          <li-input v-model="form.mobile" />
        </li-form-item>
        <li-form-item label="性别" :border="false">
          <!-- <li-radio
            v-model="form.sex"
            :range-list="[
              { id: 1, text: '男' },
              { id: 2, text: '女' },
              { id: 3, text: '未知' }
            ]"
          /> -->
          <u-radio-group v-model="form.sex">
            <u-radio size="20" activeColor="#edac2f" :customStyle="{ marginTop: '12rpx' }" label="男" :name="1"></u-radio>
            <u-radio size="20" activeColor="#edac2f" :customStyle="{ marginLeft: '8px', marginTop: '12rpx' }" label="女" :name="2"></u-radio>
            <u-radio size="20" activeColor="#edac2f" :customStyle="{ marginLeft: '8px', marginTop: '12rpx' }" label="未知" :name="3"></u-radio>
          </u-radio-group>
        </li-form-item>
        <li-form-item label="生日">
          <li-date-picker v-model="form.birthday" />
        </li-form-item>
        <li-form-item label="昵称">
          <li-input v-model="form.nickName" />
        </li-form-item>
        <li-form-item label="业余爱好">
          <li-input v-model="form.hobby" />
        </li-form-item>
      </li-form>
    </view>

    <li-bottom-btns :mode="mode" @btnDelClick="btnDelClick" @btnEditOrSaveSubmitClick="btnEditOrSaveSubmitClick" />
  </view>
</template>
<script>
import liFormMixin from '../../../mixins/liFormMixin';
import { GetEmployeeById, DelEmployeeById, AddEmployee, EditEmployee, GetDepartmentList } from '../../../common/modules/business.js';

import { transferTypeEnum } from '../../../common/dataTransfer.js';
import { checkerType, modeEnum, booleanEnum } from '../../../constants/normalConstants.js';
import { corpId, storeId } from '../../../constants/apiConstants.js';
export default {
  mixins: [liFormMixin],
  async onLoad(options) {
    this.loadEvent(options, this);
  },

  async mounted() {
    this.mountedEvent(this, {
      corpId,
      storeId,
      departmentId: 0,
      name: '',
      mobile: '',
      sex: 1,
      birthday: '1990-01-01',
      nickName: ''
    });
  },
  data() {
    return {
      modeEnum,
      booleanEnum,
      subject: '员工', // 主题
      rootRoute: 'workbench',
      routeName: 'staffManager',
      mode: 'add', // 模式
      isLoaded: false,
      id: null,
      /* 表单 */
      form: null,
      /* 弹窗 */

      // 数据转换器
      transferRules: [
        /*   {
            name: "depositMoney",
            type: transferTypeEnum.float,
          },
       */
      ],
      //表单校验规则
      rules: [
        {
          name: 'name',
          checkType: checkerType.endNotNull,
          errorMsg: '名字不能为空'
        }
      ],
      lock: false, // 节流锁

      /* 额外数据 */
      DepartmentList: []
      /* 额外校验规则 */

      /* 额外转换器 */
    };
  },

  methods: {
    onBlurEvent(e) {
      this.formBlur(e, this);
    },

    async getData() {
      this.form = (await GetEmployeeById(this.id)).data;
    },

    async getOtherData() {
      this.DepartmentList = (await GetDepartmentList()).data.list;
      if (this.mode == modeEnum.edit) {
        if (this.DepartmentList.length > 0) {
          this.form.departmentId = this.DepartmentList[0].id;
        }
      }
      // ..
    },

    async insertData() {
      return AddEmployee(this.form);
    },

    async delData() {
      return await DelEmployeeById(this.id);
    },

    async editData() {
      return await EditEmployee(this.form);
    },

    async btnDelClick() {
      await this.formDelete(this);
    },

    async btnEditOrSaveSubmitClick() {
      await this.formInsertOrEdit(this);
    }

    /* 额外方法放下面，上面是主干方法 */

    //方法放上面
  }
};
</script>
<style lang="scss" scoped>
@import '~@/static/styles/commonStyle.scss';
</style>
